import {Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, Input, Renderer} from '@angular/core';

import {Router} from "@angular/router";

declare var window;

@Component({
  selector: 'seed-recommend-goods',
  templateUrl: './recommend-goods.component.html',
  styleUrls: ['./recommend-goods.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class RecommendGoodsComponent implements OnInit {
  @Input() goods = [];
  @Input() title = [];
  public layoutStore = {
    common: {
      padding: 0.03, // percent
      border: 1, // px
    },
    columnType: {
      two: {
        itemWidth: 0.485, // percent
        imgHeight: 0
      }
    }
  };

  constructor(private router: Router, private renderer: Renderer) {
  }

  /**@description 正方形图片适配
   * @author ouyqx-691
   * @date 2018/02/28
   */
  resetCardSize() {
    const screenWidth = window.screen.width;
    const layoutStore = this.layoutStore;
    const {padding, border} = layoutStore.common;
    const columnType = layoutStore.columnType;
    for (const type in columnType) {
      if (columnType.hasOwnProperty(type)) {
        // 处理普通布局
        columnType[type].imgHeight = (screenWidth - (screenWidth * padding * 2)) * columnType[type].itemWidth - border * 2;
      }
    }
  }

  /**
   * @description 前往商品详情
   * @author ouyqx-691
   * @param goodsCode
   */
  goToGoodsDetail(goodsCode: string) {
    if (goodsCode) {
      this.router.navigate(['/goods/detail', goodsCode]);
      /**, {queryParams: {goodsCode: goodsCode}}*/
    }
  }

  ngOnInit() {
    this.resetCardSize();
    this.renderer.listen(window, 'resize', () => {
      this.resetCardSize();
    });
  }

}
